<template>
  <CerTable :columns='columns' :dataList='dataList' @onDataLists='onDataLists' @onClickUpdata='onClickUpdata' @onClickDelete='onClickDelete' :pagination='pagination' />
</template>

<script lang='ts'>
import { reactive, toRefs } from "vue";
import CerTable from "@/components/CerModule/CerTable/CerTable.vue";
import columns from "@/views/CerManage/method/CerTableConfig";
import { getcer } from "@/api/cerApi";
import createStore from "@/store/index";
export default {
  components: {
    CerTable,
  },
  props: {
    RecordData: Object,
  },
  setup(props: any) {
    const data = reactive({
      dataList: [],
      loading: false,
      pagination: {
        total: 0,
        pageSize: 8,
        hideOnSinglePage: true,
        current: 1,
      },
    } as any);

    async function dataLists(pageNo = 1) {
      try {
        data.loading = true;
        const dataLists = await getcer({
          pageNo,
          pageSize: 5,
          id: createStore.state.userDataList._id,
        });
        if (dataLists.data.data) {
          dataLists.data.data.forEach((element: any) => {
            element.key = element._id;
          });
          data.dataList = dataLists.data.data;
          data.pagination.total = dataLists.data.total;
        }
        data.loading = false;
      } catch (error) {
        data.loading = false;
      }
    }
    dataLists();

    function onDataLists(val: number) {
      data.pagination.current = val;
      dataLists(val);
    }

    /* 更新数据 */
    function onClickUpdata({
      index,
      status,
    }: {
      index: number;
      status: boolean;
    }) {
      data.dataList[index].status = status;
    }

    /* 删除数据 */
    function onClickDelete(index: number) {
      // data.dataList.splice(index, 1);
      dataLists(data.pagination.current);
    }

    return {
      ...toRefs(data),
      columns,
      onClickDelete,
      onClickUpdata,
      onDataLists,
    };
  },
};
</script>